import React, { Component, PureComponent } from 'react';
import { connect } from 'dva';
import styles from './deviceAlarm.css';
import { getGauge, getLine } from '@/utils/echarts';
import { Modal, Descriptions, Icon } from 'antd';

import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';
import { Dispatch, AnyAction } from 'redux';

interface P {
  dispatch: Dispatch<AnyAction>;
}
interface S {}

@connect()
class DeviceAlarm extends PureComponent<P, S> {
  constructor(props: P) {
    super(props);
    this.state = {
      deg: 0,
      _timer: null,
      errorId: [],
      showModel: false,
      errorNum: 0,
      totalNum: 0,
      wellPercent: '',
      toDays: [],
      toType: [],
      details: {},
    };
  }
  showProItemDetail(id?: string) {
    // this.setState({ showModel: true }, () => {
    const { dispatch } = this.props;
    dispatch({ type: 'device/problemPointDetails', payload: { id } });
    const { details } = this.props;
    this.setState({ showModel: true, details });
    console.log(details);
    // });
  }
  render() {
    const { analysis, details } = this.props;
    console.log(analysis);
    return (
      <div className={styles.detection_container}>
        <div className={styles.detection_container_left}>
          {/* <ReactEcharts option={getGauge()} /> */}
          <div className={styles.box_opt}>
            <div className={styles.displayI}>
              <span className={styles.label}>设备总数</span>{' '}
              <span className={styles.cont}>{analysis.total}</span>
            </div>
            <div className={styles.displayI}>
              <span className={styles.label}>故障设备</span>{' '}
              <span className={styles.cont}>{analysis.error}</span>
            </div>
          </div>
          <div className={styles.circle_area}>
            <div className={styles.circle_top_box}>
              {/* // 叠加圆环 */}
              <div className={[styles.inline_box, styles.w450].join(' ')} />
              <div className={[styles.inline_box, styles.w400].join(' ')} />
              <div className={[styles.inline_box, styles.w350].join(' ')}>
                <div style={{ width: '350px', height: '350px', position: 'relative', zIndex: 999 }}>
                  {/* 随机点位 */}
                  {analysis.errorId &&
                    analysis.errorId.map((e: any, i: number) => (
                      <div
                        key={i}
                        className={styles.random_box}
                        style={{ top: e.top, left: e.left }}
                        onClick={() => {
                          this.showProItemDetail(e.id);
                        }}
                      />
                    ))}
                </div>
              </div>
              <div className={[styles.inline_box, styles.w300].join(' ')} />
              <div className={[styles.inline_box, styles.w250].join(' ')} />
              <div className={[styles.inline_box, styles.w200].join(' ')} />
              <div className={[styles.inline_box, styles.w100].join(' ')} />
              <div className={[styles.inline_box, styles.w150].join(' ')} />
              <div className={[styles.inline_box, styles.w50].join(' ')} />
              {/* // 圆环刻度线 */}
              <div className={styles.like_line} />
              <div className={[styles.like_line, styles.tf15].join(' ')} />
              <div className={[styles.like_line, styles.tf30].join(' ')} />
              <div className={[styles.like_line, styles.tf45].join(' ')} />
              <div className={[styles.like_line, styles.tf60].join(' ')} />
              <div className={[styles.like_line, styles.tf75].join(' ')} />
              <div className={[styles.like_line, styles.tf90].join(' ')} />
              <div className={[styles.like_line, styles.rtf15].join(' ')} />
              <div className={[styles.like_line, styles.rtf30].join(' ')} />
              <div className={[styles.like_line, styles.rtf45].join(' ')} />
              <div className={[styles.like_line, styles.rtf60].join(' ')} />
              <div className={[styles.like_line, styles.rtf75].join(' ')} />
              {/* //扇形 */}
              <div className="sx" style={{ animation: 'spin 5s linear infinite' }} />
            </div>
          </div>
          <div className={styles.box_opt}>
            <div className={styles.displayI}>
              <span className={styles.like_point} />{' '}
              <span style={{ color: '#E85A54' }}>故障设备</span>
            </div>
            <div className={styles.displayI}>
              <span className={styles.label}>完好率</span>{' '}
              <span className={styles.cont}>{analysis.wellPercent}</span>
            </div>
          </div>
        </div>
        <div className={styles.detection_container_right}>
          <div className={styles.right_box_childs}>
            <p className={styles.title_box}>
              <span className={styles.point} />
              各设备占比图
            </p>
            <ReactEcharts option={getGauge(analysis.toType)} />
          </div>
          <div className={styles.right_box_childs}>
            <p className={styles.title_box}>
              <span className={styles.point} />
              近七日设备报警统计
            </p>
            <ReactEcharts option={getLine(analysis.toDays)} />
          </div>
        </div>
        <Modal
          visible={this.state.showModel}
          title="设备信息"
          centered={true}
          closable={false}
          // onOk={this.handleOk}
          className="modal_box"
          onCancel={() => {
            this.setState({ showModel: false });
          }}
          footer={null}
        >
          <div className={styles.tcTop_box}>
            <div className={styles.tc_left} />
            <div className={styles.tc_right}>
              <Icon
                className="tc_right_close"
                type="close"
                onClick={() => {
                  this.setState({ showModel: false });
                }}
              />
            </div>
            <Descriptions size="small" column={2}>
              <Descriptions.Item label="资产编号">{details.deviceId}</Descriptions.Item>
              <Descriptions.Item label="品牌">{details.brandName}</Descriptions.Item>
              <Descriptions.Item label="资产类别">{details.deviceTypeParentName}</Descriptions.Item>
              <Descriptions.Item label="型号">{details.model}</Descriptions.Item>
              <Descriptions.Item label="资产种类">{details.deviceTypeName}</Descriptions.Item>
              <Descriptions.Item label="规格">{details.specs}</Descriptions.Item>
              <Descriptions.Item label="设备名称">{details.deviceName}</Descriptions.Item>
              <Descriptions.Item label="安装区域">{(details.treeTypeName|| '') + (details.positionDetails||'')}</Descriptions.Item>
              <Descriptions.Item label="厂商唯一编号">{details.serialNumber}</Descriptions.Item>
              <Descriptions.Item label="设备状态">
                <span style={{ color: details.deviceState === 0 ? '#fff' : 'red' }}>
                  {details.deviceState === 0 ? '正常' : '异常'}
                </span>
              </Descriptions.Item>
            </Descriptions>
          </div>
        </Modal>
      </div>
    );
  }
}

export default connect(({ loading, device }: any) => ({
  loading: loading.effects['device/getAnalysisData'],
  analysis: device.getAnalysisData,
  details: device.problemPointDetails,
}))(DeviceAlarm);
